<template>
  <div>
    <div class="inputWrapper">
      <input
        :type="type"
        :placeholder="placeholder"
        v-model="inputVal"
        @blur="showTips"
        :class="{
          success: isValid,
          error: !isValid,
        }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["placeholder", "type", "rule", "errMsg"],
  data() {
    return {
      inputVal: "",
      isValid: true,
    };
  },
  watch: {
    inputVal(newVal) {
      // 1. 利用接收回来的字符串创建一个正则对象
      const regExp = new RegExp(this.rule);

      const errMsg = this.errMsg;

      this.isValid = regExp.test(newVal);

      if (!this.isValid) {
        console.log(errMsg);
      }
      // 2.每当数据变化，应当通知父组件
      this.$emit("valChanged", newVal);
    },
  },
  methods: {
    showTips() {
      // 如果isValid===false 就log出来
      if (!this.isValid) {
        console.log("输入框失去焦点，数据不合法");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  padding: 0 6.667vw;
  input {
    font-size: 5vw;
    line-height: 16.667vw;
    outline: none;
    border: none;
    border-bottom: 1px solid #333;
    width: 100%;
  }
  .error {
    border-bottom-color: red;
  }
}
</style>
